<template>
  <div class="introduction">
    <h2>功能简介</h2>
    <p>{{ intro }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const intro = ref(`
本项目是一个基于Vue3的失物招领管理系统，主要功能包括：
1. 失物信息的管理（增删改查）
2. 管理员安排与领取失物系统
3. 失物录入与查询
4. 失物统计
5. 数据可视化分析看板
`)
</script>

<style scoped>
.introduction {
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 8px;
}

h2 {
  color: #34495e;
  margin-bottom: 15px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

p {
  line-height: 1.6;
  font-size: 1.1em;
  color: #666;
}
</style>